刪除

刪除相對簡單很多

在列表加上刪除按鈕

在我們的 index 裡多加一個 action slot

<.table id="notes" rows={@notes}>
  <:col :let={note} label="ID"><%= note.id %></:col>
  <:col :let={note} label="內容"><%= note.content %></:col>
  <:action :let={note}>
    <.link patch={~p"/#{note}/edit"}>修改</.link>
  </:action>
  <:action :let={note}>
    <.link phx-click="delete" phx-value-id={note.id} data-confirm="確定刪除？">
      刪除
    </.link>
  </:action>
</.table>

在 Index 使用 handle_event 處理刪除

從 phx-value-id 傳到 params 裡面得到的 id 拿到 note 並刪除，再重新讀取列表。

def handle_event("delete", %{"id" => id}, socket) do
  note = Notes.get_note(id)
  Notes.delete_note(note)

  {:noreply, assign(socket, :notes, Notes.list_notes())}
end

測試

再怎樣都至少寫一些測試

test "deletes note in listing", %{conn: conn} do
  Notes.create_note(%{content: "感激筆記內容"})
  {:ok, view, _html} = live(conn, ~p"/")

  html =
    view
    |> element("a", "刪除")
    |> render_click()

  refute html =~ "感激筆記內容"
end

總結

剛開賽就覺得完全教學這個標題有點尷尬，因為雖然是想寫給剛入門的朋友看，但是篇幅實在是不太夠，結果省略了非常多雖然可以不講但是實際工作就是會用到的東西。

強力建議

1. mix phx.gen

mix phx.gen.live

這個指令可以產生預設的 LiveView CRUD 基本示範頁面，雖然說是基本，但是裡面功能相當完善，效能與測試等等的問題都有兼顧到，非常建議產生一次，然後照著裡面的寫法另外再寫一遍，遇到不懂的地方再去查官方文件，這樣會比較快上手。

2. Phoenix 文件

Elixir 各種套件的文件普遍都相當齊全，推薦看完 Phoenix 文件 的 Overview 與 Guides 部分。

想寫但是因為長度或好累喔所以沒寫的東西

1. 更詳盡的 ecto
2. LiveView 裡的 stream
3. 測試 setup 與 ex_machina
4. 利用 beam 可以輕易做到在其他框架語言不容易做到的事情。

最後感謝收看，如果有任何問題可以參加我每個月都會參加的 Elixir 聚會
https://www.meetup.com/elixirtw-taipei/
非常歡迎完全沒用過想要聊聊的朋友參加